<template>
  <div class="header">
    <div class="logo">
      <img :src="logo" alt="" />
    </div>
    <div class="timer clearfix">
      <dl class="week">
        <dt>{{ week }}</dt>
        <dd>{{ date }}</dd>
      </dl>
      <div class="time">{{ time }}</div>
    </div>
  </div>
</template>

<script>
import mitts from '@/utils/mitt';
import dayjs from 'dayjs';
import { weekDict } from '@/utils/dicts';
export default {
  name: 'useMobileHeader',
  props: {
    logo: {
      type: String,
      default: function () {
        return '';
      }
    },
    options: {
      type: Object,
      default: function () {
        return {
          backgroundColor: '#fff',
          tips: {}
        };
      }
    }
  },
  data() {
    return {
      week: '',
      time: '',
      date: ''
    };
  },
  mounted() {
    mitts.on('setDates', this.dealDate);
    let week = dayjs().format('ddd');
    const obj = {
      week: weekDict[week],
      time: dayjs().format('HH:mm'),
      date: dayjs().format('YYYY年MM月DD日')
    };
    this.dealDate(obj);
  },
  methods: {
    // 监听时间更新的消息
    dealDate(obj) {
      this.week = obj.week || '';
      this.time = obj.time || '';
      this.date = obj.date || '';
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  background-color: #fff;
  :deep(.van-notice-bar) {
    background: none;
    height: 150px;
    line-height: 150px;
  }
}
</style>
